<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item of swiperList" :key="item.id" class="swipper_wrapper swipper_one">
        <div class="swiper_imgs" v-if="item.imgUrl">
          <img :src="item.imgUrl" alt="" />
        </div>

        <div class="swiper_imgs_list" v-if="item.imgWrapper">
          <div class="imgs_item" v-for="(item, index) in item.imgWrapper" :key="index">
            <img class="img" :src="item.imgUrl" alt="" />
          </div>
        </div>

        <!--  自定义扩展  -->
        <div v-if="item.text" class="swiper_text">
          <div><p class="txt_title">{{item.text.title}}</p></div>
          <div class="text_box">
            <p class="text_title">{{item.text.name}}</p>
            <span class="text_body">
              {{item.text.desc}}
            </span>
          </div>
          <!-- <p>{{ item.text }}</p> -->
        </div>
      </swiper-slide>

      <!-- Optional controls -->
      <div v-if="swiperArrow" class="swiper-button-prev" slot="button-prev"></div>
      <div v-if="swiperArrow" class="swiper-button-next" slot="button-next"></div>
      <div v-if="swiperDots" class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

  /**
   *
   * <Swipper :swiperList=""      // 轮播列表 example [{ id: "01", imgUrl: "", text: "" //支持添加包括图片以外的数据扩展 }]
   *          :swiperDots="false"  // 是否展示小圆点
   *          :swiperArrow="false" // 是否展示左右箭头
   *          />
   */

  import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "swipper",
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  props: ["swiperList", "imgWrapper", "swiperArrow", "swiperDots", "autoplay"],
  data() {
    return {
      swiperOption: {
        // slidesPerView: 4, // 每页展示几条数据
        // slidesPerGroup: 4, // 每屏滚动几条数据
        autoplay: this.autoplay?{delay: 3000, stopOnLastSlide: false, disableOnInteraction: true,}:false, // 是否自动播放
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          bulletElement: "span", //设置分页器小圆点标签，默认为span标签
          clickable: true,
          paginationClickable: true,
          notNextTick: true,
          bulletClass: "swiper-pagination-bullet",
          bulletActiveClass: "swiper-pagination-bullet-active"
          // type:'custom',//自定义导航的前提设置
          // renderCustom: function (swiper, current, total) {//current从1开始 total=5       有5个轮播页
          //   var customPaginationHtml = "";
          //   for(var i = 0; i < total; i++) {//加导航点
          //     if(i == (current - 1)) {
          //       customPaginationHtml += '<span class="bullet-class bullet-active-class"></span>';
          //     } else {
          //       customPaginationHtml += '<span class="bullet-class"></span>';
          //     }
          //   }
          //   for(var i = 0; i < total-1; i++){//加分割线（可不加 完全自定义）
          //     customPaginationHtml += '<div class="line"></div>'
          //   }
          //   return customPaginationHtml;
          // }
        },
        loop: true
      },
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.wrapper {
  overflow: hidden;
  // width: 100%;
}

.swipper_wrapper {
  clear: both;
  box-sizing: border-box;
  /* 公司简介轮播图 固定 750px */
  align-items: center;
  align-self: center;
}

.swiper-button-prev,
.swiper-button-next {
  width: 24px;
  height: 24px;
}
.swiper-button-prev {
  background-image: url("../assets/image/left_arrow.png") !important;
}
.swiper-button-next {
  background-image: url("../assets/image/right_arrow.png") !important;
}

.swiper_imgs_list {
  display: flex;
  justify-content: space-between;
  align-self: center;
  align-items: center;

  .imgs_item {
    width: 25%;
    padding: 20px !important;
    display: flex;
    justify-content: center;

    .img {
      max-width: 100%;
      max-height: 350px;
      align-items: center;
    }
  }
}

.swiper_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
}

/**
    移动端样式
     */
@media screen and (max-width: $mobile_width) {
  .swipper_wrapper {
    padding: 40px !important;
  }
}
</style>
